<script setup>
import api from '@/api/index.js'
import { message } from 'ant-design-vue'
import { computed, ref, h, provide } from 'vue'
import MyTable from '@/components/MyTable/MyTable.vue'
import { Modal } from 'ant-design-vue'
import { getConsants } from '@/utils'
import ImageView from '@/components/ImageView/ImageView.vue'

const props = defineProps({
  // 表格数据总条数
  total: { type: Number, default: 0 },
  // 表格当前页码
  pageNum: { type: Number, default: 1 }
})
// 分页参数
const pagination = computed(() => ({
  total: props.total,
  showSizeChanger: false,
  current: props.pageNum,
  onChange: (e) => {
    emits('pageChange', e)
  }
}))

const emits = defineEmits(['edit', 'pageChange', 'reload', 'xq'])

// 表格列配置
const columns = ref([
  { ellipsis: true, title: '序号', key: 'index', width: '70px', align: 'center' },
  { ellipsis: true, title: '农机名称', dataIndex: 'machineName', key: 'machineName' },
  { ellipsis: true, title: '农机类型', key: 'machineType' },
  { ellipsis: true, title: '设备编号', dataIndex: 'deviceNo', key: 'deviceNo' },
  { ellipsis: true, title: '农机编号', dataIndex: 'machineNo', key: 'machineNo' },
  // { ellipsis: true, title: '绑定设备', dataIndex: 'aaaaaaaa', key: 'aaaaaaaa', },
  { ellipsis: true, title: '当前位置', key: 'currentGpsInfo' },
  // { ellipsis: true, title: '总工作里程', dataIndex: 'aaaaaaaa', key: 'aaaaaaaa', },
  // { ellipsis: true, title: '总工作时间', dataIndex: 'aaaaaaaa', key: 'aaaaaaaa', },
  { ellipsis: true, title: '农机状态', key: 'machineStatus' },
  { ellipsis: true, title: '农机图片', key: 'machineImages' },
  { ellipsis: true, title: '农机归属', dataIndex: 'belongOrgName', key: 'belongOrgName' },
  { ellipsis: true, title: '农机维保周期', key: 'checkInfo' },
  { ellipsis: true, title: '备注', dataIndex: 'remark', key: 'remark' },
  { ellipsis: true, title: '操作', key: 'set', width: '220px', align: 'center' }
])

// 编辑数据
const edit = (item) => {
  emits('edit', item)
}

// 数据详情
const xq = (item) => {
  emits('xq', item)
}

//删除数据
const del = (item) => {
  Modal.warning({
    title: '删除设备',
    content: h(
      'span',
      {},
      '是否删除农机数据：',
      h('span', { style: { color: '#09c690' } }, item.machineName)
    ),
    okText: '删除',
    okCancel: true,
    okButtonProps: { type: 'primary', danger: true },
    cancelButtonProps: { type: 'primary' },
    cancelText: '取消',
    onOk: async () => {
      await api.delMachin({ id: item.machineId })
      message.success('删除成功')
      emits('reload')
      return Promise.resolve()
    },
    onCancel: () => {
      message.success('取消删除')
      return Promise.resolve()
    }
  })
}
provide('columns', columns.value)
</script>

<template>
  <MyTable :pagination="pagination" :scroll="{ y: 'calc(100vh - 383px)' }">
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.key === 'currentGpsInfo'">
        <span :title="record?.currentGpsInfo?.address ?? '--'">
          {{ record?.currentGpsInfo?.address ?? '--' }}
        </span>
      </template>
      <template v-if="column.key === 'index'">
        {{ index + 1 }}
      </template>
      <template v-if="column.key === 'machineType'">
        {{ getConsants('machine_type', record.machineType) }}
      </template>
      <template v-if="column.key === 'machineStatus'">
        {{ getConsants('machine_status', record.machineStatus) }}
      </template>
      <template v-if="column.key === 'checkInfo'">
        <span>{{ record.checkInfo.split(',')[0] }}</span>
        <span>{{ record.checkInfo.split(',')[1] }}</span>
        <span>{{ record.checkInfo.split(',')[2] }}次</span>
        <div :title="record.checkInfo.split(',')[3]" class="com-full com-slh">
          {{ record.checkInfo.split(',')[3] }}
        </div>
      </template>
      <template v-if="column.key === 'machineImages' && record.machineImages">
        <ImageView :value="record.machineImages" />
      </template>
      <template v-if="column.key === 'set'">
        <AButton type="link" @click="xq(record)">详情</AButton>
        <AButton type="link" @click="edit(record)">编辑</AButton>
        <AButton type="link" class="com-delbtn" @click="del(record)">删除</AButton>
      </template>
    </template>
  </MyTable>
</template>
